<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的使用</title>
    <!-- 引入vue, 开发环境 -->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app {
            font-size: 20px;
            color: green;
        }
        .f_r {
            color: red;
        }
        .student span {
            display: inline-block;
            padding: 10px;
            margin: 10px;
            bottom: 1px solid  #ddd;
            background-color:  #f9f9f9;
            color: #000;
            border-radius: 10px;
        }
        .input01 input {
            width: 60px;
            height: 30px;
            border: 1px solid  #ddd;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Vue的使用</h1>
    <div id="app">
        <p>[[message]] </p>
        <p class="f_r">[[loginMsg ]]</p>
        <p>
            <a v-bind:href="baidu_url" target="_blank">百度</a>
            <a :href="tengxun_url" target="_blank">腾讯</a>
        </p>
        <hr>
        <!-- if条件渲染 -->
        <!-- v-if语句 -->
        <p v-if="seen">你能看见我吗? </p>
        <!-- v-if语句 和 v-else -->
        <p v-if="isLogin">个人中心</p>
        <p v-else>登录</p>
        <!-- v-if , v-else-if, v-else -->
        <P>
            成绩等级
            <span v-if="level === 1">A</span>
            <span v-else-if="level === 2">B</span>
            <span v-else-if="level === 3">C</span>
            <span v-else>D</span>
        </P>

        <hr>
        <h2>for列表渲染</h2>
        <div class="student">
            <span v-for="(name, index) in names">
                [[ index + 1 ]] [[ name ]]
            </span>
        </div>
        <ul>
            <li v-for="student in students">
                姓名: [[ student.name ]],
                性别: [[ student.sex ]],
                年龄: [[ student.age ]]        
            </li>
        </ul>

        <hr>
        <h2>事件 methods</h2>
        <p>
            <button v-on:click="login">登录</button>
            <button v-on:click="login2('赵嫣然')">显示姓名登录</button>
            <button v-on:click="add(80, 40)">两个数加法</button>
            <button v-on:click="subtraction(80, 40)">两个数减法</button>
            <button v-on:click="multiply(80, 40)">两个数乘法</button>
            <button v-on:click="divide(80, 0)">两个数除法</button>
        </p>

        <hr>
        <h2>model表单输入绑定(双向绑定数据)</h2>
        <div class="imput01">
            <input type="number" v-model="num1">
            <select v-model="operator">
                <option value="+"> + </option>
                <option value="-"> - </option>
                <option value="*"> * </option>
                <option value="/"> / </option>
            </select>
            <input type="number" v-model="num2">
            <button @click="num_operator"> = </button>
            [[ result ]]
            <p>[[ num1 ]] [[ operator ]] [[ num2 ]] = [[ result ]]</p>
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app', // 获取页面标记对象 <div id="app"></div>
            delimiters: ['[[', ']]'],
            data: {
                message: '欢迎您 Vue!!!',
                loginMsg: '用户名或密码不正确',
                baidu_url: 'https://www.baidu.com',
                tengxun_url: 'https://www.qq.com',
                seen: true,
                isLogin: false,
                level: 2,
                names: [
                    '曹汉草','陈丽瑶','陈若涵','杜小杰','冯徐通','高梦阳',
                    '高雨涵','葛徐威','郭宏宇','韩宇博','候佳敏','胡向阳',
                    '焦鹏欣','李海兵','李明航','李强', '李师洋','李世博',
                    '刘田诺一','马智慧','阮俊杰','申天乐','万复审','汪小家',
                    '王瑞雪','王玉','魏子豪','武嘉兴','刑家乐','徐密正',
                    '杨志伟','袁成林','张余辉','赵开心','赵嫣然','周浩然'               
                ],
                students: [
                    {
                        'name': '陈丽瑶',
                        'sex': '女',
                        'age': 19,
                    },
                    {
                        'name': '李海滨',
                        'sex': '男',
                        'age': 20,
                    },
                    {
                        'name': '袁成林',
                        'sex': '女',
                        'age': 19,
                    },
                    {
                        'name': '赵开心',
                        'sex': '男',
                        'age': 19,
                    }                    
                ],
                num1: 0,
                num2: 0,
                result: 0,
                operator: '+'
            },
            // 事件
            methods: {
                login: function() {
                    alert('欢迎您登录! ! ! ');
                },
                login2: function(name) {
                    alert('欢迎您登录! ! ! ' + name);
                },
                add: function(a, b) {
                    result = a + b
                    alert(a + ' + ' + b + ' = ' + result);
                },
                subtraction: function(a, b) {
                    result = a - b
                    alert(a + ' - ' + b + ' = ' + result);
                },
                multiply: function(a, b) {
                    result = a * b
                    alert(a + ' * ' + b + ' = ' + result);
                },
                divide: function(a, b) {
                    if (b === 0) {
                    alert('除数不能为0');
                    return;
                }
                    result = a / b;
                    alert(a + ' / ' + b + ' = ' + result);
                },

                num_operator: function() {
                    if (this.operator == '+')
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                    else if (this.operator == '-')
                        this.result = this.num1 - this.num2;
                    else if (this.operator == '*')
                        this.result = this.num1 * this.num2;
                    else if (this.operator == '/')
                        this.result = this.num1 / this.num2;
                    else
                        this.result = 0

                },
            },
        });
    </script>
</body>
</html>